
<template>
  <view class="modal-container">
    <uni-popup :mask-click="false" class="popupBox" ref="popup" :type="type">
      <view class="popup">
        <view class="popup-title-box" :class="{ modal: modelType == 'modal' }">
          <view class="popup-title-content" v-if="modelType == 'popup'">
            <text class="title">
              {{ title }}
            </text>
            <block v-for="(item, index) in formData" :key="{ index }">
              <input
                class="journey-name-input"
                name="input"
                :placeholder="item.placeholder"
                 v-model="form[item.field+'']"
              />
            </block>
          </view>
          <view class="" v-if="modelType == 'modal'">
            <view class="popup-title-content">
              {{ title }}
            </view>
          </view>
          <view class="popup-footer" :class="{ modal: modelType == 'modal' }">
            <button
              class="cancel-btn"
              :class="{ modal: modelType == 'modal' }"
              @click="cancel"
              :data-spmCntSuffix="'.cancelBtn.cancel@'"
              :data-custom="1"
              :data-spm="{'pos': '取消'}"
            >
              取消
            </button>
            <button
              class="confirm-btn"
              :class="{ modal: modelType == 'modal' }"
              @click="submit"
              :data-spmCntSuffix="'.confirmBtn.submit@'"
              :data-custom="1"
              :data-spm="{'pos': '确认'}"
            >
            {{activatedTxt}}
            </button>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  props: {
    modelType: {
      type: String,
      default: "popup",
    },
    type: {
      type: String,
      default: "center",
    },
    formData: {
      type: Array,
      default: () => {
        return [
          // {
          //   isShow: false,
          //   value:'',
          //   placeholder: '请输入',
          //   errMsg: '请填写行程名称哦~'
          // }
        ]
      },
    },
    title: {
      type: String,
      default: "",
    },
    value: {
      type: Boolean,
      default: false,
    },
    activatedTxt:{
      type: String,
      default: "确认",
    }
  },
  data: () => ({
    form: {},
  }),
  computed: {},
  methods: {
    cancel() {
      this.$emit("input", false);
    },
    submit() {
      let value = "";
      if (this.modelType == "popup") {
        value = this.form;
        if(value.editInfo=='' || value.editInfo == undefined) {
          uni.showToast({
            title: '请填写行程名称~',
            duration: 500,
          });
          return
        }
        if(value.editInfo.length>20){
          uni.showToast({
            title: '行程名称不能超过20字哦~',
            duration: 500,
          });
          return
        }


      }

      if (this.modelType == "modal") {
        value = true;
      }
      
      console.log(value, "456789979", this.modelType);
      this.$emit("confirm", value);
      this.$emit("input", false);
    },
  },
  watch: {
    value(val) {
      console.log(val, "4579----", this.form);
      if (val) {
        this.$refs.popup.open();
      } else {
        this.$refs.popup.close();
      }
    },
  },

  // 组件周期函数--监听组件挂载完毕
  mounted() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style scoped>


/* 弹窗 */

.popupBox {
  height: auto;
}
.popupBox .popup-title-box {
  position: relative;
  align-items: center;
  width: 578rpx;
  height: 364rpx;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  opacity: 1;
}

.popup-title-box.modal {
  height: 218rpx;
}

.popup-title-box.modal .popup-title-content {
  width: 100%;
  height: 44rpx;
  font-size: 32rpx;
  padding-left: 0;
  padding-bottom: 40rpx;
  text-align: center;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #1a1a1a;
  border-bottom: 1rpx solid #ddd;
  box-sizing: content-box;
}

.popup-title-box::placeholder {
  font-size: 28rpx;
  font-family: PingFangSC-Regular-, PingFangSC-Regular;
  font-weight: normal;
  color: #ccc;
  line-height: 45rpx;
}

.popupBox .popup-title-content {
  padding: 40rpx 0 0 28rpx;
  height: 44rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Medium-, PingFangSC-Medium;
  font-weight: normal;
  color: #262626;
  line-height: 45rpx;
}
.journey-name-input {
  width: 522rpx;
  height: 64rpx;
  margin: 36rpx auto;
  background: #f7f7f7;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  opacity: 1;
}

.popup-footer {
  width: 100%;
  display: flex;
  position: absolute;
  bottom: 52rpx;
  left: 0;
  justify-content: space-between;
}

.popup-footer.modal {
  bottom: 0rpx;
}

.popup-footer .cancel-btn,
.confirm-btn {
  width: 240rpx;
  height: 76rpx;
  border-radius: 38rpx 38rpx 38rpx 38rpx;
  opacity: 1;
  border: 2rpx solid #262626;
  font-size: 34rpx;
  font-family: PingFangSC-Regular-, PingFangSC-Regular;
  font-weight: normal;
  color: #262626;
  line-height: 72rpx;
}

.popup-footer .cancel-btn.modal,
.confirm-btn.modal {
  width: 240rpx;
  height: 90rpx;
  font-size: 34rpx;
  font-family: PingFangSC-Regular-, PingFangSC-Regular;
  font-weight: normal;
  color: #262626;
  border: 0;
  line-height: 90rpx;
}

.popup-footer .confirm-btn {
  background: #f75d1f;
  color: #ffffff;
  border: none;
}
.popup-footer .cancel-btn.modal.modal {
  background: none;
  height: 76rpx;
  font-size: 32rpx;
  width: 50%;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #282828;
}
.popup-footer .confirm-btn.modal {
  color: #ff6464;
  border: 0;
  border-left: 1rpx solid #ddd;
  width: 50%;
  border-radius: 0;
  background: none;
}

.popup-footer .cancel-btn.modal.modal::after,
.popup-footer .confirm-btn.modal::after {
  border: none;
}
</style>